<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div fxLayout="row" class="page-container-padding">
    <div
        fxFlex="100"
        fxLayout="column"
        fxLayoutAlign="start start"
        *ngIf="profileLoaded"
    >
        <sp-split-section
            title="Main Settings"
            subtitle="Manage your basic profile settings here."
        >
            <sp-warning-box *ngIf="isExternalUser">
                Settings for externally-managed users can't be changed.
            </sp-warning-box>
            <div fxLayout="row" fxLayoutAlign="start center">
                <span>{{ userData.username }}</span>
                <button
                    [disabled]="isExternalUser"
                    mat-button
                    mat-raised-button
                    color="accent"
                    class="ml-15"
                    (click)="openChangeEmailDialog()"
                >
                    Change email
                </button>
            </div>
            <mat-form-field fxFlex color="accent" class="mt-10 mb-10">
                <mat-label>Full Name</mat-label>
                <input
                    [disabled]="isExternalUser"
                    [(ngModel)]="userData.fullName"
                    matInput
                />
            </mat-form-field>
            <div fxLayout="row" fxLayoutAlign="start center">
                <button
                    [disabled]="isExternalUser"
                    mat-button
                    mat-raised-button
                    color="accent"
                    (click)="saveProfileSettings()"
                >
                    Update profile
                </button>
                <button
                    [disabled]="isExternalUser"
                    mat-button
                    mat-raised-button
                    color="accent"
                    class="ml-15"
                    (click)="openChangePasswordDialog()"
                >
                    Change password
                </button>
            </div>
        </sp-split-section>
        <mat-divider></mat-divider>
        <div fxLayout="row" fxFlex="100" class="mt-30">
            <sp-split-section
                title="Appearance"
                subtitle="Change the appearance of your {{
                    appConstants.APP_NAME
                }} installation"
            >
                <label id="radio-group-label">Color Scheme</label>
                <mat-radio-group
                    [(ngModel)]="darkMode"
                    aria-labelledby="radio-group-label"
                    class="appearance-radio-group"
                    (ngModelChange)="changeModePreview($event)"
                >
                    <mat-radio-button
                        [value]="false"
                        class="appearance-radio-button"
                        >Light Mode</mat-radio-button
                    >
                    <mat-radio-button
                        [value]="true"
                        class="appearance-radio-button"
                        >Dark Mode</mat-radio-button
                    >
                </mat-radio-group>
                <div>
                    <button
                        mat-button
                        mat-raised-button
                        color="accent"
                        (click)="updateAppearanceMode()"
                    >
                        Save color scheme
                    </button>
                </div>
            </sp-split-section>
        </div>
    </div>
</div>
